import React, { useState } from 'react'

const App = () => {
    const [obj, setObj] = useState({
        x:0,
        y:0,
        w:100,
        h:100
    })

    function mouseMove(e){
        console.log('被执行了', e.clientX,e.clientY);
        // 鼠标移动的时候发现 x 和 y 可以正常变换，但是 w 和 h 的数据丢失了
        // setObj({
        //     x: e.clientX,
        //     y: e.clientY
        // })

        // 如果要是有一百个属性，这么去写肯定是不合理
        // setObj({
        //     x: e.clientX,
        //     y: e.clientY,
        //     w: 100,
        //     h:100
        // })

        // 可以通过展开符进行先将原数据展开，然后设置新数据进行覆盖即可
        setObj({
            ...obj,
            x: e.clientX,
            y: e.clientY
        })

    }

  return (
    <div style={{width: '100vw', height: '100vh'}} onMouseMove={mouseMove}>
        <div>
            元素的宽高： {obj.w} --- {obj.h}
        </div>
        <div>
            元素的坐标： {obj.x} --- {obj.y}
        </div>
    </div>
  )
}

export default App